<template>
  <FaLayout v-loading="loading" class="page" :right="240" :left="240">
    <AppHeader slot="header">
      <ElButton type="primary" @click="submit">提交</ElButton>
    </AppHeader>

    <div slot="left" class="page-left">
      <ControlSign
        :seals="signs.seals"
        :signatures="signs.signatures"
        :date-sign="signs.dateSign"
        :actor="actors[0]"
        :viewer="viewer"
      />
    </div>

    <FaContract
      ref="viewer"
      :docs="docs"
      :doc-index.sync="docIndex"
      :page-src="getPageImg"
      widget
      riding
      :allowedRidingTypes="allowedRidingTypes"
      :widgets="widgets"
      :seals="signs.seals"
      :signatures="signs.signatures"
      :sign-options="signOptions"
      :before-widget-drop="beforeWidgetDrop"
      :before-sign-change="beforeSignChange"
    />

    <FaThumbs slot="right" :viewer="viewer" :docs="docs" :doc-index.sync="docIndex" />
  </FaLayout>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, Ref, ref, toRefs } from 'vue'
import { Message } from 'element-ui'
import {
  WidgetMode,
  ActorData,
  Widget,
  WidgetType,
  SignData,
  DocData,
  Viewer,
  SignOptions,
  WidgetKind
} from 'fdd-contract'
import AppHeader from '../components/AppHeader.vue'
import ControlSign from '../components/ControlSign.vue'
import { alertWidgetsRaw } from '../utils'
import { getDateSignImg, getDetail, getPageImg } from '../utils/mock'

/** 合同签署 */
export default defineComponent({
  name: 'ContractSign',
  components: { ControlSign, AppHeader },

  setup() {
    /** 合同控件 */
    const viewer = ref(null) as Ref<Viewer | null>

    /** 详情数据 */
    const detail: {
      docs: DocData[]
      actors: ActorData[]
      signs: {
        seals: SignData[]
        signatures: SignData[]
        dateSign: SignData
      }
      widgets: Widget[]
    } = reactive({
      docs: [],
      actors: [],
      signs: {
        seals: [],
        signatures: [] as SignData[],
        dateSign: { img: '' }
      },
      widgets: []
    })

    /** 加载中 */
    const loading = ref(false)

    /** 当前文档索引 */
    const docIndex = ref(0)

    /** 详情加载 */
    async function load() {
      try {
        loading.value = true

        const { docs, actors, signs } = await getDetail()
        const actor = actors[0]
        const docId = docs[0].id

        Object.assign(detail, { docs, actors, signs })

        detail.widgets = [
          /** 印章 指定位置 */
          new Widget({
            type: WidgetType.SEAL,
            mode: WidgetMode.USE,
            actor,
            sign: signs.seals[0],
            // 指定位置
            fixed: true,
            p: 0,
            docId,
            ox: 200,
            oy: 100
          }),

          /** 印章 批量 */
          new Widget({
            type: WidgetType.SEAL,
            mode: WidgetMode.USE,
            kind: WidgetKind.BATCH,
            actor,
            sign: signs.seals[1],
            docId,
            ox: 200,
            oy: 350
          }),

          /** 印章 骑缝 */
          new Widget({
            type: WidgetType.SEAL,
            mode: WidgetMode.USE,
            kind: WidgetKind.RIDING,
            actor,
            sign: signs.seals[0],
            docId,
            oy: 400
          }),

          /** 印章 指定印章 */
          new Widget({
            type: WidgetType.SEAL,
            mode: WidgetMode.USE,
            actor,
            sign: signs.seals[2],
            assignedSignId: signs.seals[2].id,
            // 指定位置
            fixed: true,
            p: 0,
            docId,
            ox: 200,
            oy: 600
          }),

          /** 印章 指定印章 不固定位置 */
          new Widget({
            type: WidgetType.SEAL,
            mode: WidgetMode.USE,
            actor,
            sign: signs.seals[0],
            assignedSignId: signs.seals[0].id,
            p: 0,
            docId,
            ox: 200,
            oy: 800
          }),

          /** 签名 */
          new Widget({
            type: WidgetType.SIGNATURE,
            mode: WidgetMode.USE,
            actor,
            sign: signs.signatures[0],
            p: 0,
            docId,
            ox: 600,
            oy: 100
          }),

          /** 日期 */
          new Widget({
            type: WidgetType.DATE,
            mode: WidgetMode.USE,
            actor,
            p: 0,
            docId,
            ox: 600,
            oy: 350
          }),

          /** 备注签 */
          new Widget({
            type: WidgetType.REMARK,
            mode: WidgetMode.USE,
            actor,
            p: 0,
            docId,
            ox: 600,
            oy: 600
          })
        ]
      } finally {
        loading.value = false
      }
    }

    onMounted(load)

    return {
      ...toRefs(detail),

      /** 合同控件 */
      viewer,

      /** 加载中 */
      loading,

      /** 当前文档索引 */
      docIndex,

      /** 允许的骑缝控件类型 */
      allowedRidingTypes: [WidgetType.SEAL, WidgetType.SIGNATURE],

      /** 获取文档页面图片地址 */
      getPageImg,

      /** 签章配置选项 */
      signOptions: reactive({
        signGlobal: true,
        signResizable: true,
        // 指定位置的日期章不可设置
        dateSignSetting: widget => !widget.fixed,
        dateSignGlobal: true,
        dateSignSrc: getDateSignImg
      } as SignOptions),

      /** 控件拖入校验 */
      beforeWidgetDrop(widget: Widget) {
        if (widget.sign?.granted === false) {
          const msg = '未授权签章不允许拖入'
          Message.error(msg)
          return Promise.reject(msg)
        }
      },

      /** 控件切换校验 */
      beforeSignChange(widget: Widget, sign: SignData) {
        if (sign.granted === false) {
          const msg = '未授权签章不允许切换'
          Message.error(msg)
          return Promise.reject(msg)
        }
      },

      /** 提交 */
      async submit() {
        await viewer.value?.validate()

        alertWidgetsRaw(detail.widgets)
      }
    }
  }
})
</script>
